<template>
  <div class="detailfree" :style="flag ? {background:`rgb(${color[0].toString()})`}:'' ">
    <img id="background" v-show="flag" :src="url" crossorigin="anonymous" />
    <div v-html="this.$route.params.obj.title" class="btn"></div>
    <div class="bg" v-if="flag" :style="{background:`rgb(${color[0].toString()})`}"></div>
  </div>
</template>

<script>
import ColorThief from "colorthief";
export default {
  data() {
    return {
      color: [],
      url: "",
      flag: false,
      imgheight:0
    };
  },
  methods: {
    ImgColor() {
      var _this = this;
      // let div = document.getElementsByClassName("detailfree")[0];
      // let img = div.getElementsByTagName("img")[0];
      var aaa = this.$route.params.obj.content.match(
        /src=[\'\"]?([^\'\"]*)[\'\"]?/i
      );
      console.log(aaa);
      this.url = aaa[1];
      setTimeout(function () {
        let domImg = document.querySelector("#background");
        _this.imgheight = domImg.height;
        let colorthief = new ColorThief();
        console.log("加载好了并取色", colorthief.getPalette(domImg)); //第二个参数可选(1~10)
        _this.color = colorthief.getPalette(domImg);
        _this.flag = true;
      }, 100);
    },
  },
  created() {},
  mounted() {
    this.ImgColor();
  },
  watch: {
    $route(to, from) {
      const that = this;
      var _this = this;
      this.flag = false;
      // let div = document.getElementsByClassName("detailfree")[0];
      // let img = div.getElementsByTagName("img")[0];
      // let domImg = img;
      // let colorthief = new ColorThief();
      // this.color = colorthief.getPalette(domImg);
      // this.flag = true;
      _this.ImgColor();
    },
  },
};
</script>

<style>
.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -9999;
}
.detailfree {
  margin: 0 0 20% 0;
  width: 100%;
 
}
.detailfree img {
  width: 100%;
}
.btn {
  width: 100%;
  height: 44px;
  position: fixed;
  bottom: 0;
  background-color: #81cd72;
  text-align: center;
  line-height: 44px;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
</style>